package cn.client.ui.view.main.chat

import android.view.WindowId
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.ScaffoldState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Send
import androidx.compose.material.rememberScaffoldState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import cn.client.R
import cn.client.data.remoteData.bean.SearchFriend


/**
 * 当前对话页面，显示整体，包括顶部导航、底部导航和对话视图
 */
@Composable
fun CurrentChat(
    userId: Int,
    friendId: Int,
    navController: NavController
) {


    Scaffold(
        /* 顶部栏 */
        topBar = {
            CurrentChatTopBar(
                onClickBack = { navController.navigateUp() }
            )
        },
        bottomBar = {
            ChatInputField(
            )
        }
    ) { it ->
        /* 聊天视图 */
        LazyColumn(
            modifier = Modifier.padding(it)
        ) {

        }
    }
}

//@Preview
//@Composable
//fun CurrentChatPreview(){
//
//    Scaffold(
//        /* 顶部栏 */
//        topBar = {
//            CurrentChatTopBar(
//                onClickBack = {   }
//            )
//        },
//        /* 输入框 */
//        bottomBar = {
//            ChatInputField()
//        }
//    ) { it->
//        /* 聊天视图 */
//        LazyColumn(
//            modifier = Modifier.padding(it)
//        ){
//
//        }
//    }
//}

// 输入框
@Composable
fun ChatInputField(

) {
    var text by remember { mutableStateOf("") }    // 输入框
    val focusRequester = remember { FocusRequester() }   //用于请求焦点的对象
    val focusManager = LocalFocusManager.current
    val keyboard = LocalSoftwareKeyboardController.current   //用于操作键盘的对象

//    LaunchedEffect(key1 = Unit, block = {
//        focusRequester.requestFocus()//首次进入和重组页面请求焦点
//        keyboard?.show()//首次进入页面弹出键盘，注意必须先获取焦点才能弹出键盘成功
//    })

    // 根据是否聚焦调整输入框的某些属性，例如高度
    val inputModifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)
        .background(colorResource(id = R.color.LightGray01), shape = RoundedCornerShape(2.dp))
        .height(60.dp)


    Row(
        modifier = inputModifier,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        BasicTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier
                .background(Color.White, CircleShape)
                .weight(1f)
                .padding(start = 5.dp)
                .focusRequester(focusRequester)
                .fillMaxWidth(), // 确保输入框占据 Row 的剩余空间
            textStyle = TextStyle(
                color = colorResource(id = R.color.DarkGray01),
                fontSize = 16.sp,
            ),
            decorationBox = { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(horizontal = 2.dp)
//                        .focusRequester(focusRequester)
                    ) {
                    /* 占位符 */
                    IconButton(
                        onClick = { },
                    ) {
                        Icon(
                            painterResource(id = R.drawable.ic_close_one),
                            null, tint = Color.White
                        )
                    }
                    Box(
                        modifier = Modifier.weight(1f),
                        contentAlignment = Alignment.CenterStart
                    ) {
                        innerTextField()
                    }
                    IconButton(
                        onClick = {
                            text = ""
                            // 清除焦点
                            focusManager.clearFocus()
                            /* TODO: 处理发送消息的回调 */
                        }
                    ) { Icon(imageVector = Icons.Default.Send, contentDescription = null) }
                }
            },
            keyboardActions = KeyboardActions(onSearch = {
            }),
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done)
        )
    }
}

// 顶部栏
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CurrentChatTopBar(
    onClickBack: () -> Unit
) {
    TopAppBar(
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary
        ),
        title = { Text("聊天") },
        /* 左边按钮 */
        navigationIcon = {
            IconButton(onClick = {
                /*  返回 */
                onClickBack()
            }) {
                Icon(Icons.AutoMirrored.Filled.ArrowBack, null)
            }
        },
        /* 右边按钮（可以是多个） */
        actions = { IconButton(onClick = { }) { Icon(Icons.Filled.MoreVert, null) } }
    )
}


